/*----- 商品一覧 上部分 -----------------------------------------------------------------*/
.headbox {
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.selectbox {
  display: flex;
  margin-left: auto;
}

/* 商品表示件数 */
.item_number {
  font-size: 16px;
  padding-top: 12px;
  text-align: left;
  color: #000000;
  opacity: 1;
}

.select-sp {
  display: none;
}

/* 商品表示件数 ソート */
.select_display {
  position: relative;
  margin-left: 30px;
  margin-bottom: 4px;
}

/* 商品表示件数 ソート　セレクトボックス*/
.select_display::before,
.select_display::after {
  position: absolute;
  right: 10px;
  width: 8px;
  height: 6px;
  background: black;
  border: 1px solid white;
  opacity: 1;
  content: '';
  pointer-events: none;
}

.select_display::before {
  top: calc(50% - 8px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.select_display::after {
  bottom: calc(50% - 15px);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.select_display select {
  appearance: none;
  min-width: 88px;
  height: 36px;
  padding-right: 25px;
  border: 1px solid #707070;
  border-radius: 3px;
  background-color: #F2F2F2;
  color: #000000;
  font-size: 16px;
  font-family: "Shippori Mincho";
  text-align: center;
  cursor: pointer;
}

/* 商品表示順 ソート */
.select_sort {
  position: relative;
  margin-left: 15px;
  margin-bottom: 4px;
}

/* 商品表示順 ソート セレクトボックス */
.select_sort::before,
.select_sort::after {
  position: absolute;
  right: 10px;
  width: 8px;
  height: 6px;
  background: black;
  border: 1px solid white;
  opacity: 1;
  content: '';
  pointer-events: none;
}

.select_sort::before {
  top: calc(50% - 8px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.select_sort::after {
  bottom: calc(50% - 15px);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

@media screen and (max-width: 600px) {
  .select-pc {
    display: none;
  }

  .select-sp {
    display: flex;
  }

  .item_number {
    padding-top: unset;
  }

  .selectbox {
    align-items: center;
    margin-bottom: 2.4rem;
  }

  .select_display::before {
    top: 50%;
    transform: translateY(calc(-50% - 5px));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }

  .select_display::after {
    top: 50%;
    transform: translateY(calc(-50% + 5px));
    clip-path: polygon(0 0, 50% 100%, 100% 0);
  }

  .select_sort::before {
    top: 50%;
    transform: translateY(calc(-50% - 5px));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }

  .select_sort::after {
    top: 50%;
    transform: translateY(calc(-50% + 5px));
    clip-path: polygon(0 0, 50% 100%, 100% 0);
  }
}

.select_sort select {
  appearance: none;
  min-width: 144px;
  height: 36px;
  padding-right: 25px;
  border: 1px solid #707070;
  border-radius: 3px;
  background-color: #F2F2F2;
  color: #000000;
  font-size: 16px;
  font-family: "Shippori Mincho";
  text-align: center;
  cursor: pointer;
}

/*----- カテゴリ表示 -----------------------------------------------------------------*/
.outline_display {
  font-size: 16px;
  padding-top: 20px;
  padding-left: 10px;
  padding-bottom: 30px;
  color: #000000;
}

@media screen and (max-width: 600px) {
  .outline_display {
    padding-bottom: 16px;
  }
}

.category_triangle {
  color: #394D80;
}

/*----- 商品表示 -----------------------------------------------------------------*/
.itemsbox {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.7rem;
  row-gap: 4.2rem;
}

.item_display {
  width: calc((100% - (2.7rem * 4)) / 5);
}

.card-body {
  display: block;
}

.card-img-top {
  aspect-ratio: 284 / 196;
  width: 100%;
  height: auto;
  margin-bottom: 1.8rem;
}

.item-category-txt {
  display: block;
  font-size: 1.2rem;
  line-height: calc(17 / 12);
  color: #534B7A;
  margin-bottom: .4rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.item_name {
  font-size: 20px;
  line-height: calc(29 / 20);
  color: #000000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.item_price {
  font-size: 14px;
  color: #000000;
}


@media screen and (max-width: 1100px) {
  .itemsbox {
    column-gap: 1.6rem;
  }

  .item_display {
    width: calc((100% - (1.6rem * 3)) / 4);
  }

  .card-img-top {
    margin-bottom: 1rem;
  }
}


@media screen and (max-width: 600px) {
  .itemsbox {
    column-gap: 1.6rem;
  }

  .item_display {
    width: calc((100% - 1.6rem) / 2);
  }
}

/*----- 商品一覧 ページネーション -----------------------------------------------------------------*/
.p-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;

}

.pagenation1 {
  width: 88px;
  height: 36px;
  padding-top: 5px;
  margin-right: 12px;
  text-align: center;
  letter-spacing: 0px;
  border: 1px solid #707070;
  background: #F2F2F2 0% 0% no-repeat padding-box;
  opacity: 1;
}

.pagenation2 {
  width: 36px;
  height: 36px;
  padding-top: 5px;
  margin-right: 12px;
  text-align: center;
  letter-spacing: 0px;
  border: 1px solid #707070;
  background: #F2F2F2 0% 0% no-repeat padding-box;
  opacity: 1;
}

.pagenation3 {
  width: 36px;
  height: 36px;
  padding-top: 5px;
  margin-right: 12px;
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  border: 1px solid #707070;
  background: #2E2B3E 0% 0% no-repeat padding-box;
  opacity: 1;
}

/* スマホサイズ */
@media screen and (max-width: 600px) {
  .pagenation1 {
    display: none;
  }
}


/*----- 商品詳細 表示 -----------------------------------------------------------------*/
.detailbox {
  display: flex;
  margin-top: 70px;
  column-gap: 6.4vw;
}

.imagesbox {
  width: 47.7213542%;
}

#pre_0 {
  width: 100%;
  height: auto;
  aspect-ratio: 733 / 486;
}

.img-gp {
  display: flex;
  column-gap: 1.6rem;
  margin-top: 20px;
}

.img-gp-item {
  width: calc(100% / 5);
}

.img-gp-item .s_img {
  width: 100%;
  height: auto;
  aspect-ratio: 165 / 109;
}

.itembox {
  flex: 1;
  padding-right: 5.2vw;
  word-break: break-all;
}

.item_detail_name {
  font-size: 32px;
  color: #000000;
}

.item_detail_base_price {
  font-size: 16px;
  line-height: calc(24 / 16);
  color: #000000;
}

.item_detail_price {
  font-size: 26px;
  color: #000000;
  padding-bottom: 20px;
}

.item_detail_detail {
  font-size: 16px;
  color: #000000;
  padding-bottom: 20px;
  line-height: calc(24 / 16);
  width: 98%;
}

.item_detail_category {
  font-size: 16px;
  line-height: calc(24 / 16);
  color: #000000;
}

.line {
  border-bottom: 1px solid #707070;
  margin-top: 5rem;
  margin-bottom: 5rem;
  opacity: 1;
}

.cart_form {
  display: flex;
}

@media screen and (max-width: 1600px) {
  .itembox {
    padding-right: unset;
  }
}

@media screen and (max-width: 1200px) {
  .detailbox {
    flex-direction: column;
    align-items: center;
    row-gap: 4rem;
  }

  .imagesbox {
    width: 90%;
  }

  .itembox {
    width: 90%;
    padding-right: unset;
  }

  .cart_form {
    justify-content: center;
  }
}

/* スマホサイズ */
@media screen and (max-width: 600px) {
  .imagesbox {
    width: 100%;
  }

  .itembox {
    width: 100%;
    padding-right: unset;
  }
}

/*----- 商品数量ボタン -----------------------------------------------------------------*/
/** input/スピンボタンのラップ要素 **/
.number-spinner-wrap {
  position: relative;
  display: block;
  width: 150px !important;
  height: 50px;
}

/** デフォルトのスピンボタンを隠す **/
.number-spinner-wrap input::-webkit-outer-spin-button,
.number-spinner-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/** input要素 **/
.number-spinner-wrap input {
  width: 100%;
  height: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
  text-align: center;
  font-size: 16px;
  border: 1px solid #E5E5E5;
}

/** スピンボタン要素 **/
.number-spinner-wrap .spinner {
  position: absolute;
  top: 50%;
  width: 50px;
  transform: translate(0, -50%);
  font-size: 16px;
  padding: 12.5px 12.5px;
  text-align: center;
  background: #F0F0F0;
  cursor: pointer;
  user-select: none;
}

/** 減算のスピンボタン要素 **/
.number-spinner-wrap .spinner-down {
  left: 0px;
  height: 51px;
  font-size: 16px;
  border-right: 1px solid #E5E5E5;
}

/** 加算のスピンボタン要素 **/
.number-spinner-wrap .spinner-up {
  right: 0px;
  height: 51px;
  font-size: 16px;
  border-left: 1px solid #E5E5E5;
}

.cart_button {
  max-width: 290px;
  height: 50px;
  margin-left: 15px;
  font-size: 16px;
  color: #FFFFFF;
  background: #394D80 0% 0% no-repeat padding-box;
  border: 1px solid #394D80;
  opacity: 1;
  flex: 1;
}

/*----- レスポンシブ -----------------------------------------------------------------*/

/* スマホサイズ */
@media screen and (max-width: 600px) {
  .headbox {
    display: flex;
    flex-wrap: wrap;
  }

  .select_display {
    position: relative;
    margin-left: 5px;
    margin-bottom: 4px;
  }

  .select_sort {
    position: relative;
    margin-left: 5px;
    margin-bottom: 4px;
  }
}

/*
関連商品
---------------------------------*/
.recommend-ttl {
  margin-top: 8.7rem;
  margin-bottom: 5rem;
}

/*カートの個数エラー*/
.count_data_error_message{
    color: red;
}